<template>
  <div>
    <goga-header title="我的积分">
      <div slot="left">
        <span @click="goBack">
          <icon symbol="back"> </icon>
        </span>
      </div>
      <div slot="right">
        <router-link :to="{name:'jifen-rule'}">规则</router-link>
      </div>
    </goga-header>
    <div>
      <div class="jifen-all">
        <div class="p-num">{{integral}}</div>
        <div class="p-tit">当前可用积分</div>
      </div>
      <img v-if="firstLoading" class="gxb-loading" src="/public/images/loding.gif" alt="">
      <ul class="jifen-list">
        <li v-for="(item,index) in jifen.data" :key="index">
          <h3>{{item.iContent}}</h3>
          <div class="info">
            <span> {{item.changeDate}}</span>
            <span v-if="item.iType==1">+{{item.iNum}}</span>
            <span v-if="item.iType==2">-{{item.iNum}}</span>
          </div>
        </li>
      </ul>
      <div v-if="jifen.pageNum>jifen.page">
        <div class="list-loading" v-if="loading">
          <img src="/public/images/loading-min.gif" alt="">
        </div>
        <div class="list-loadmore">
          <button class="loadmore-btn" @click="loadMore">
            加载更多
          </button>
        </div>
      </div>
      <div class="list-complete" v-if="jifen.pageNum!=0 && (jifen.pageNum<=jifen.page)">
        <img src="/public/images/min-logo.png" alt="">
      </div>
    </div>
    <transition name="rule">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script lang="babel">
  import gogaHeader from '@components/goga-header'
  import Icon from '@components/icon'
  import {mapGetters} from 'vuex'
  const fetchJifenData = async(store, page) => {
    return await store.dispatch('backend/jifen/getJifen', page)
  }
  export default {
    components: {
      gogaHeader,
      Icon
    },
    computed: {
      ...mapGetters({
        integral: 'backend/jifen/getAll',
        jifen: 'backend/jifen/getJifen'
      })
    },
    data () {
      return {
        firstLoading: true,
        loading: false
      }
    },
    async mounted () {
      let StatusCode = await fetchJifenData(this.$store, 1);
      if (StatusCode !== '200') {
        this.$router.replace({name: 'login', query: {redirect: '/jifen'}})
        return
      }
      this.firstLoading = false
    },
    methods: {
      goBack() {
        this.$router.go(-1);
      },
      loadMore() {
        let page = this.jifen.page + 1;
        if (page <= this.jifen.pageNum) {
          this.loading = true;
          fetchJifenData(this.$store, page);
          this.loading = false;
        }
      }
    }
  }
</script>
<style lang="less">
  @import "index.less";
</style>
